'use strict';
'require view';
'require ui';
'require form';
'require rpc';

function handlePage(ev)
{
	var filter = document.querySelector('input[name="filter"]'),
	    pager = ev.target.parentNode,
	    offset = +pager.getAttribute('data-offset'),
	    next = ev.target.classList.contains('next');

	if ((next && (offset + 100) >= currentDisplayRows.length) ||
	    (!next && (offset < 100)))
	    return;

	offset += next ? 100 : -100;
	pager.setAttribute('data-offset', offset);
	pager.querySelector('.text').firstChild.data = currentDisplayRows.length
		? _('Displaying %d-%d of %d').format(1 + offset, Math.min(offset + 100, currentDisplayRows.length), currentDisplayRows.length)
		: _('No packages');

	if (offset < 100)
		pager.querySelector('.prev').setAttribute('disabled', 'disabled');
	else
		pager.querySelector('.prev').removeAttribute('disabled');

	if ((offset + 100) >= currentDisplayRows.length)
		pager.querySelector('.next').setAttribute('disabled', 'disabled');
	else
		pager.querySelector('.next').removeAttribute('disabled');

	var placeholder = _('No information available');

	if (filter.value)
		placeholder = [
			E('span', {}, _('No packages matching "<strong>%h</strong>".').format(filter.value)), ' (',
			E('a', { href: '#', onclick: 'handleReset(event)' }, _('Reset')), ')'
		];

	cbi_update_table('#packages', currentDisplayRows.slice(offset, offset + 100),
		placeholder);
}

return view.extend({
    
    render: (data) => {

		var m, s, o;

		m = new form.Map('proft', _('Ad Settings'));

		s = m.section(form.GridSection, 'domain', _('Host entries'));
		s.addremove = true;
		s.anonymous = true;
		s.sortable  = true;

		
		o = s.option(form.Value, 'address', _('Ad address'));
		o.datatype = 'adaddr';
		o.rmempty = true;


		return m.render();


		// var m, s, o;

		// m = new form.Map('ad', _('Ad Settings'));

		// s = m.section(form.GridSection, 'jump', _('Jump times'));
		// s.addremove = true;
		// s.anonymous = true;
		// s.sortable  = true;


		// s.tab('general', _('Ad address'));
		// s.tab('advanced', _('Jump times'));
		
		// o = s.taboption("general", form.Value, 'ip', _('Ad address'));
		// o.datatype = 'adaddr';
		// o.rmempty = true;


		// s = m.section(form.GridSection, 'domain', _('Host entries'));
		// s.addremove = true;
		// s.anonymous = true;
		// s.sortable  = true;

		// o = s.taboption("advanced",form.Value, 'name', _('Hostname'));
		// o.datatype = 'hostname';
		// o.rmempty = true;

		// o = s.taboption("advanced", form.Value, 'jumpTimes', _('Jump times'));
		// o.datatype = 'jumptimes';
		// o.rmempty = true;



    //    let m = new form.Map('ad', _("Ad Settings"),'');

	// 	let s = m.section(form.GridSection, 'ad', _("Ad Settings"));
	// 	s.sortable = true;
	// 	s.anonymous = true;
	// 	s.addremove = true;
    //     s.handleAdd = (ev) => {
	// 		var config_name = this.uciconfig || this.map.config,
	// 		    section_id = uci.add(config_name, this.sectiontype);

	// 		uci.set(config_name, section_id, 'target', 'DNAT');

	// 		this.addedSection = section_id;
	// 		this.renderMoreOptionsModal(section_id);
	// 	};

    //     s.filter = (section_id) => {
	// 		return (uci.get('ad', section_id, 'target') != 'SNAT');
	// 	};

    //     s.sectiontitle = function(section_id) {
	// 		return uci.get('ad', section_id, 'name') || "广告配置";
	// 	};


		// let view = E([], [
		// 	E('div', { 'class': 'controls', 'style': 'display:none' }, [
		// 		E('div', { 'id': 'pager', 'class': 'center' }, [
		// 			E('button', { 'class': 'btn cbi-button-neutral prev', 'aria-label': _('Previous page'), 'click': handlePage }, [ '«' ]),
		// 			E('div', { 'class': 'text' }, [ 'dummy' ]),
		// 			E('button', { 'class': 'btn cbi-button-neutral next', 'aria-label': _('Next page'), 'click': handlePage }, [ '»' ])
		// 		])
		// 	]),

		// 	E('table', { 'id': 'packages', 'class': 'table' }, [
		// 		E('tr', { 'class': 'tr cbi-section-table-titles' }, [
		// 			E('th', { 'class': 'th col-2 left' }, [ _('Host name') ]),
		// 			E('th', { 'class': 'th col-2 left version' }, [ _('Ad address') ]),
		// 			E('th', { 'class': 'th col-1 center size'}, [ _('Jump times') ]),
		// 			E('th', { 'class': 'th right cbi-section-actions' }, [ '\u00a0' ])
		// 		])
		// 	])
		// ]); 

        // return view;
    }
}); 